import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { defineMessages, intlShape, injectIntl, FormattedMessage } from 'react-intl'
import { hashHistory } from 'react-router'
import { Modal, Toast } from 'antd-mobile'
import { helper, config, myFetch } from '../utils'
import { messages } from '../trade'

const alert = Modal.alert

class GuadanListItem extends Component {
  onRevokeCancel = (orderno) => {
     let propmt = this.props.intl.formatMessage(messages.prompts)
     //console.log(this.props.intl.formatMessage)
     let content = this.props.intl.formatMessage(messages.cancelguadan)
    alert(propmt, <div className="rt-guadan-alert">{content}</div>, [
      { text: '取消', onPress: () => console.log('cancel') },
      { text: '确定', onPress: () => { this.onConfirmCancel(orderno)}},
    ])
  }
  onConfirmCancel = (orderno) => {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        TORD: orderno,
        OFLG: 1
      })
    }
    myFetch(`${config.rootApi}/mCancel`, options, true)
    .then((rs) => {
      if (rs && rs.statusCode == 0) {
        Toast.success('取消挂单成功', 2, () => {
          this.props.onCancel(true)
        })
      }
    })
  }
  render() {
    const {data} = this.props
    console.log(data)
    return (
      <li className="-list">
        <div className="-first">
          <div className="-one">
              <h4>
                <FormattedMessage id={helper.splitString(data.ccyPair)[0]}/>
                <span>/</span>
                <FormattedMessage id={helper.splitString(data.ccyPair)[1]}/>
              </h4>
              <span>
                <div className={`in ${data.bsCls == 0 ? 'sell' : 'buy'}`}>
                  {data.bsCls == 0 ? <FormattedMessage id="sell"/> : <FormattedMessage id="buy"/>}
                </div>
              </span>
              <span>
                {helper.accDiv(data.orderAmt, 1000)}
                <span className="icon">
                   x 1000
                  <FormattedMessage id={helper.splitString(data.ccyPair)[0]}/>
                </span>
              </span>
          </div>
          <div className="-two">
            <span>
              <FormattedMessage
                id='price'
              />
            ：<span className={`-price`}>{data.orderPrice}</span></span>
            <span>
              <FormattedMessage
                id='termofvalidity'
              />
            ：<span className={`-time`}>
                <FormattedMessage id={helper.conrequestTime(data.orderTermCls)}/>
              </span>
            </span>
            <span>
                <FormattedMessage
                    id='type'
                  />
             <span className="direction">
               <FormattedMessage
                    id='bidirectionalsingle'
                  />
             </span></span>
          </div>
      </div>
      <div className="-bottom">
          <div className="modify"
            onClick={
              () => {
                hashHistory.push({
                  pathname: '/position/modifyorder',
                  query: {
                    orderno: data.orderNo,
                    ccyPair: data.ccyPair,
                    direction: data.bsCls,
                    amn: data.orderAmt
                  }
                })
              }
            }
          >
            <FormattedMessage
              id='modifyguadan'
            />
          </div>
          <div
             className="revoke"
             onClick={
               () => {
                  this.onRevokeCancel(data.orderNo)
               }
             }
          >
            <FormattedMessage
              id='revoke'
            />
          </div>
      </div>
    </li>
    )
  }
}

GuadanListItem.propType = {
  intl: intlShape.isRequired
}
export default injectIntl(GuadanListItem)